<template>
  <div>
    <el-form ref="myForm" :model="formData" label-width="100px">
      <el-row>
        <el-col :sm="12" :md="8" :lg="6">
          <el-form-item label="标题" prop="title">
            <el-input v-model.trim="formData.title" maxlength="12" />
          </el-form-item>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <el-form-item label="分类" prop="t_nav_fk">
            <cat-options
              v-model="formData.t_nav_fk"
              :empty="true"
            ></cat-options>
          </el-form-item>
        </el-col>
        <el-col :sm="12" :md="8" :lg="6">
          <el-form-item label="创建时间" prop="create_time">
            <el-date-picker
              v-model="formData.create_time"
              type="daterange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-button
          type="primary"
          @click.prevent="handleQuery(1)"
          native-type="submit"
          >查询</el-button
        >
        <el-button @click="handleReset(myForm)">重置</el-button>
        <el-button type="primary"  v-if="store.getters.hasFun(['/article/*','/article/insert'])" @click="handleShow({insert:true})">增加</el-button>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      height="calc(100vh - 220px)"
      style="width: 100%"
    >
      <el-table-column prop="title" label="标题" />
      <el-table-column prop="nav_name" label="分类" />
      <el-table-column prop="publish_time" label="发布时间" />
      <el-table-column prop="create_time" label="增加时间" />
      <el-table-column prop="update_time" label="修改时间" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleShow({update:true},scope.row)"
            v-if="store.getters.hasFun(['/article/*','/article/update'])"
          >
            修改
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            v-if="store.getters.hasFun(['/article/*','/article/delete'])"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :currentPage="formData.page"
      :page-size="formData.rows"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <update 
    v-if="useObj.update"
    :model-value="showObj.update" 
    @close="handleClose" 
    :update-data="updateData"></update>
    <insert 
    v-if="useObj.insert"
    :model-value="showObj.insert" 
    @close="handleClose"></insert>
  </div>
</template>

<script lang="ts" setup>
import setup from "@/util/list";
import { computed, } from "vue";
import { useStore } from "vuex";
import update from "./article-update.vue";
import insert from "./article-insert.vue";

import CatOptions from "./cat-options.vue";

const store = useStore();

const {
  myForm,
  showObj,
  useObj,
  formData,
  updateData,
  tableData,
  count,
  handleQuery,
  handleReset,
  handleDelete,
  handleShow,
  handleSizeChange,
  handleCurrentChange,
  handleClose,
} = setup("article");


formData.create_time = computed({
  set(val: any) {
    formData.create_time_begin = val ? val[0] : "";
    formData.create_time_end = val ? val[1] : "";
  },
  get: () => [formData.create_time_begin, formData.create_time_end],
});

handleReset(undefined);
</script>

<style scoped>
</style>